Cesium功能实现（一）创建billboard广告牌

您所在的位置：网站首页 › billboard 记录 › Cesium功能实现（一）创建billboard广告牌

Cesium功能实现（一）创建billboard广告牌

2023-08-20 10:15| 来源: 网络整理| 查看: 265

Cesium功能实现（一）创建billboard广告牌 Cesium可实现功能之billboard广告牌Cesium官方API成员变量及中文释义案例js和css代码实现给billboard添加label

Cesium可实现功能之billboard广告牌

最近在学习cesium，试着实现了billboard功能模块，但在实现过程中遇到一些问题，就记录下来。

Cesium官方API

官网链接https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html

成员变量及中文释义 MembersValuealignedAxis获取或设置世界空间中的对齐轴color获取或设置与广告牌纹理相乘的颜色disableDepthTestDistance获取或设置与相机的距离distanceDisplayCondition获取或设置条件，该条件指定将在距摄像机的距离显示此广告牌。eyeOffset获取或设置在眼坐标中应用于此广告牌的3D笛卡尔偏移height获取或设置广告牌的高度heightReference获取或设置此广告牌的高度参考horizontalOrigin获取或设置此广告牌的水平原点id获取或设置选择广告牌时返回的用户定义对象image获取或设置要用于此广告牌的图像pixelOffset获取或设置屏幕空间中距此广告牌原点的像素偏移pixelOffsetScaleByDistance根据广告牌与摄像头的距离，获取或设置广告牌的近像素偏移量和远像素偏移量缩放属性position获取或设置此广告牌的笛卡尔位置rotation获取或设置以弧度为单位的旋转角度scale获取或设置与广告牌的图像大小（以像素为单位）相乘的统一比例scaleByDistance根据广告牌与相机的距离获取或设置广告牌的近和远缩放属性show确定是否显示此广告牌sizeInMeters获取或设置广告牌大小以米或像素为单位translucencyByDistance根据广告牌到相机的距离，获取或设置广告牌的近和远半透明属性verticalOrigin获取或设置此广告牌的垂直原点width获取或设置广告牌的宽度案例 js和css

先在html中引入cesium.js和css

@import url(./Build/Cesium/Widgets/widgets.css); 代码实现

创建广告牌

// 创建一个billboard广告牌 var viewer = new Cesium.Viewer("cesiumContainer"); var billboard = viewer.entities.add({ name:"自定义billboard lab", position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard:{ image: "img/image.jpg", show: true, // default eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER scale: 2.0, // default: 1.0 // color: Cesium.Color.LIME, // default: WHITE rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0 alignedAxis: Cesium.Cartesian3.ZERO, // default width: 25, // default: undefined height: 25, // default: undefined pixelOffset: new Cesium.Cartesian2(0, -72), } }); viewer.zoomTo(billboard);

效果图在这里插入图片描述

给billboard添加label

在定义一个billboard的基础上，添加label属性

// 创建一个billboard广告牌 var viewer = new Cesium.Viewer("cesiumContainer"); var billboard = viewer.entities.add({ name:"自定义billboard", position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard:{ image: "img/image.jpg", show: true, // default eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER scale: 2.0, // default: 1.0 // color: Cesium.Color.LIME, // default: WHITE rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0 alignedAxis: Cesium.Cartesian3.ZERO, // default width: 25, // default: undefined height: 25, // default: undefined pixelOffset: new Cesium.Cartesian2(0, -72), }, label: { //文字标签 text: "这是一个label文字标签", font: "20px sans-serif", showBackground: true, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0.0, -39.9522222), pixelOffsetScaleByDistance: new Cesium.NearFarScalar( 1.5e2, 3.0, 1.5e7, 0.5 ), }); viewer.zoomTo(billboard);

效果图在这里插入图片描述

【本文地址】

Cesium功能实现（一）创建billboard广告牌

Cesium功能实现（一）创建billboard广告牌

今日新闻

推荐新闻